<template>
  <div class="home">
    <el-form
      :model="beanForm"
      ref="beanForm"
      label-width="160px"
      style="margin: 20px 50px 20px 0px;"
      size="mini">
      <el-row>
        <!--机构类型-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="机构类型"
            :label-width="formLabelWidth"
            prop="oside_type"
            :rules="rules.oside_type"
          >
            <el-select
              v-model="beanForm.oside_type"
              placeholder="请选择机构类型"
              filterable
              clearable
            >
              <el-option
                v-for="(value,key,index) in dict.oside_type"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--机构编码-->
        <el-col :span="8">
          <el-form-item
            label="机构编码"
            :label-width="formLabelWidth"
            prop="n_oside_code"
            :rules="rules.n_oside_code"
          >
            <el-input v-model="beanForm.n_oside_code" disabled />
          </el-form-item>
        </el-col>
        <!--三证合一编码-->
        <el-col :span="8">
          <el-form-item
            label="三证合一编码"
            :label-width="formLabelWidth"
            prop="threeforone_code"
            :rules="rules.threeforone_code"
          >
            <el-input v-model="beanForm.threeforone_code" />
          </el-form-item>
        </el-col>
        <!--组织机构编码-->
        <el-col :span="8">
          <el-form-item
            label="组织机构编码"
            :label-width="formLabelWidth"
            prop="organ_osidecode"
            :rules="rules.organ_osidecode"
          >
            <el-input v-model="beanForm.organ_osidecode" />
          </el-form-item>
        </el-col>
        <!--机构名称-->
        <el-col :span="8">
          <el-form-item
            label="机构名称"
            :label-width="formLabelWidth"
            prop="n_oside_name"
            :rules="rules.n_oside_name"
          >
            <el-input v-model="beanForm.n_oside_name" />
          </el-form-item>
        </el-col>
        <!--机构种类-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="机构种类"
            :label-width="formLabelWidth"
            prop="n_org_type"
            :rules="rules.n_org_type"
          >
            <el-select
              v-model="beanForm.n_org_type"
              placeholder="请选择机构种类"
              filterable
              clearable
              @change="org_type_change"
            >
              <el-option
                v-for="(value,key,index) in dict.n_org_type"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--一级分类-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="一级分类"
            :label-width="formLabelWidth"
            prop="core_typeone"
            :rules="rules.core_typeone"
          >
            <el-select
              v-model="beanForm.core_typeone"
              placeholder="请选择一级分类"
              filterable
              clearable
              @change="core_typeone_change"
            >
              <el-option
                v-for="item in dict.core_typeone"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--二级分类-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="二级分类"
            :label-width="formLabelWidth"
            prop="core_typetwo"
            :rules="rules.core_typetwo"
          >
            <el-select
              v-model="beanForm.core_typetwo"
              placeholder="请选择二级分类"
              filterable
              clearable
            >
              <el-option
                v-for="item in dict.core_typetwo"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--人行一级分类-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="人行一级分类"
            :label-width="formLabelWidth"
            prop="oside_bc_type"
            :rules="rules.oside_bc_type"
          >
            <el-select
              v-model="beanForm.oside_bc_type"
              placeholder="请选择人行一级分类"
              filterable
              clearable
              @change="oside_bc_type_change"
            >
              <el-option
                v-for="(value,key,index) in dict.oside_bc_type"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--人行二级分类-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="人行二级分类"
            :label-width="formLabelWidth"
            prop="oside_bc_subtype"
            :rules="rules.oside_bc_subtype"
          >
            <el-select
              v-model="beanForm.oside_bc_subtype"
              placeholder="请选择人行二级分类"
              filterable
              clearable
              :disabled="oside_bc_subtype_disabled"
            >
              <el-option
                v-for="item in dict.oside_bc_subtype"
                :key="item.itemkey"
                :label="item.itemval"
                :value="item.itemkey"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--区域(省)-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="区域(省)"
            :label-width="formLabelWidth"
            prop="province"
            :rules="rules.province"
          >
            <el-select
              v-model="beanForm.province"
              placeholder="请选择区域(省)"
              filterable
              clearable
              @change="province_change"
            >
              <el-option
                v-for="item in dict.province"
                :key="item.area_code"
                :label="item.area_name"
                :value="item.area_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--区域(市)-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="区域(市)"
            :label-width="formLabelWidth"
            prop="city"
            :rules="rules.city"
          >
            <el-select
              v-model="beanForm.city"
              placeholder="请选择区域(市)"
              filterable
              clearable
            >
              <el-option
                v-for="item in dict.city"
                :key="item.area_code"
                :label="item.area_name"
                :value="item.area_code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--所属证监会行业-->
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="所属证监会行业"
            :label-width="formLabelWidth"
            prop="their_csrc_indu"
            :rules="rules.their_csrc_indu"
          >
            <el-select
              v-model="beanForm.their_csrc_indu"
              placeholder="所属证监会行业"
              filterable
              clearable
            >
              <el-option
                v-for="item in dict.their_csrc_indu"
                :key="item.id"
                :label="item.text"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--关联方-->
        <el-col :span="8">
          <el-form-item
            label="关联方"
            :label-width="formLabelWidth"
            prop="related_party"
            :rules="rules.related_party"
          >
            <el-checkbox v-model="beanForm.related_party" true-label="1" false-label="0" ></el-checkbox>
          </el-form-item>
        </el-col>
        <!--房地产行业-->
        <el-col :span="8">
          <el-form-item
            label="房地产行业"
            :label-width="formLabelWidth"
            prop="real_estate_indu"
            :rules="rules.real_estate_indu"
          >
            <el-checkbox v-model="beanForm.real_estate_indu" true-label="1" false-label="0" ></el-checkbox>
          </el-form-item>
        </el-col>
        <!--实际控制人-->
        <el-col :span="8">
          <el-form-item
            label="实际控制人"
            :label-width="formLabelWidth"
            prop="actual_controller"
            :rules="rules.actual_controller"
          >
            <el-input v-model="beanForm.actual_controller" />
          </el-form-item>
        </el-col>
        <!--通讯地址-->
        <el-col :span="8">
          <el-form-item
            label="通讯地址"
            :label-width="formLabelWidth"
            prop="n_address"
            :rules="rules.n_address"
          >
            <el-input v-model="beanForm.n_address" />
          </el-form-item>
        </el-col>
        <!--联系人-->
        <el-col :span="8">
          <el-form-item
            label="联系人"
            :label-width="formLabelWidth"
            prop="n_contact"
            :rules="rules.n_contact"
          >
            <el-input v-model="beanForm.n_contact" />
          </el-form-item>
        </el-col>
        <!--电话号码-->
        <el-col :span="8">
          <el-form-item
            label="电话号码"
            :label-width="formLabelWidth"
            prop="n_phoneno"
            :rules="rules.n_phoneno"
          >
            <el-input v-model="beanForm.n_phoneno" />
          </el-form-item>
        </el-col>
        <!--传真号码-->
        <el-col :span="8">
          <el-form-item
            label="传真号码"
            :label-width="formLabelWidth"
            prop="n_faxno"
            :rules="rules.n_faxno"
          >
            <el-input v-model="beanForm.n_faxno" />
          </el-form-item>
        </el-col>
        <!--网址-->
        <el-col :span="8">
          <el-form-item
            label="网址"
            :label-width="formLabelWidth"
            prop="n_website"
            :rules="rules.n_website"
          >
            <el-input v-model="beanForm.n_website" />
          </el-form-item>
        </el-col>
        <!--备注-->
        <el-col :span="8">
          <el-form-item
            label="备注"
            :label-width="formLabelWidth"
            prop="n_remark"
            :rules="rules.n_remark"
          >
            <el-input v-model="beanForm.n_remark" />
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align:center">
        <el-button type="success" @click="submitForm('beanForm')">提交</el-button>
        <el-button type="info" plain @click="resetForm('beanForm')">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import * as kk from '../../../../utils/k-utils'

  export default {
    name: 'M866SP001',
    data() {
      // 电话号码
      var validate_phoneno = function(rule, value, callback) {
        // 定义正则表达式
        var reg = new RegExp('((^\\d{11}$)|(^\\s{0}$)|(^(0\\d{2,3}-)?\\d{5,9}$))')
        if (!reg.test(value)) {
          callback(new Error('电话号码格式错误'))
        }
      }
      // 传真号码
      var validate_faxno = function(rule, value, callback) {
        // 定义正则表达式
        var reg = new RegExp('(^(^\\s{0}$)|((\\+?[0-9]{2,4}\\-[0-9]{3,4}\\-)|([0-9]{3,4}\\-))?([0-9]{7,8})(\\-[0-9]+)?$)')
        if (!reg.test(value)) {
          return callback(new Error('传真号码格式错误'))
        }
      }
      // 网址
      var validate_website = function(rule, value, callback) {
        // 定义正则表达式
        var reg = new RegExp('(^(^\\s{0}$)|((https?|ftp|news):\\/\\/)?([a-z]([a-z0-9\\-]*[\\.。])+([a-z]{2}|aero|arpa|biz|com|coop|edu|gov|info|int|jobs|mil|museum|name|nato|net|org|pro|travel)|(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))(\\/[a-z0-9_\\-\\.~]+)*(\\/([a-z0-9_\\-\\.]*)(\\?[a-z0-9+_\\-\\.%=&]*)?)?(#[a-z][a-z0-9_]*)?$)')
        if (!reg.test(value)) {
          return callback(new Error('网址格式错误'))
        }
      }
      return {
        dict: {
          oside_type: {}, // 机构类型
          n_org_type: {}, // 机构种类
          core_typeone: {}, // 一级分类
          core_typetwo: {}, // 二级分类
          oside_bc_type: {}, // 人行一级分类
          oside_bc_subtype: {}, // 人行二级分类
          province: {}, // 区域(省)
          city: {}, // 区域(市)
          their_csrc_indu: {} // 所属证监会行业
        },
        formLabelWidth: '180px',
        beanForm: {
          id: '', // 主键
          oside_type: '', // 机构类型
          n_oside_code: '', // 机构编码
          threeforone_code: '', // 三证合一编码
          organ_osidecode: '', // 组织机构编码
          n_oside_name: '', // 机构名称
          n_org_type: '', // 机构种类
          core_typeone: '', // 一级分类
          core_typetwo: '', // 二级分类
          oside_bc_type: '', // 人行一级分类
          oside_bc_subtype: '', // 人行二级分类
          province: '', // 区域(省)
          city: '', // 区域(市)
          their_csrc_indu: '', // 所属证监会行业
          related_party: '0', // 关联方 复选框
          real_estate_indu: '0', // 房地产行业 复选框
          actual_controller: '', // 实际控制人
          n_address: '', // 通讯地址
          n_contact: '', // 联系人
          n_phoneno: '', // 电话号码
          n_faxno: '', // 传真号码
          n_website: '', // 网址
          n_remark: '' // 备注
        },
        oside_bc_subtype_disabled: true, // 人行二级分类是否禁用
        rules: {
          oside_type: [
            { required: true, message: '请选择机构类型', trigger: 'change' }
          ],
          n_oside_code: [
            { required: true, message: '请输入机构编码', trigger: 'blur' }
          ],
          n_oside_name: [
            { required: true, message: '请输入机构名称', trigger: 'blur' }
          ],
          n_org_type: [
            { required: true, message: '请选择机构种类', trigger: 'change' }
          ],
          core_typeone: [
            { required: true, message: '请选择一级分类', trigger: 'change' }
          ],
          core_typetwo: [
            { required: true, message: '请选择二级分类', trigger: 'change' }
          ],
          oside_bc_type: [
            { required: true, message: '请选择人行一级分类', trigger: 'change' }
          ],
          oside_bc_subtype: [
            { required: true, message: '请选择人行二级分类', trigger: 'change' }
          ],
          // 电话号码，传真号码，网址
          n_phoneno: [
            { validator: validate_phoneno, trigger: 'blur' }
          ],
          n_faxno: [
            { validator: validate_faxno, trigger: 'blur' }
          ],
          n_website: [
            { validator: validate_website, trigger: 'blur' }
          ]
        }
      }
    },
    // el对象被添加就触发
    mounted() {
      // 初始化调用
      this.init()
    },
    // 每次打开页面调用，在mounted之后调用
    beforeRouteEnter(to, from, next) {
      // 这里还无法访问到组件实例，this === undefined
      next(vm => {
        // 通过 `vm` 访问组件实例
        // 重置页面数据
        vm.$refs['beanForm'].resetFields()
      })
    },
    methods: {
      // 页面初始化
      init: function() {
        /* 加载字典 */
        // 机构类型
        kk.k_load_dict(this, 'oside_type', 't8_oside_type')
        // 机构种类
        kk.k_load_dict(this, 'n_org_type', 't8_org_type')
        // 人行一级分类
        kk.k_load_dict(this, 'oside_bc_type', 't8_liabilities_type1')
        // 区域(省)
        var _this = this
        kk.k_load_exeid('public', 'M8654EQ001', {}).then(rep => {
          _this['dict']['province'] = rep.rows
        })
        // 所属证监会行业
        this.dict.their_csrc_indu = [
          { id: 1, text: '金融理财' }
        ]
        // 机构编码初始化值
        this.oside_code_init()
      },
      // 机构编码初始化值
      oside_code_init() {
        var _this = this
        var orgno = ''
        // 获得独立对象编码
        kk.k_load_exeid('public', 'M867EQ125', {}).then(rep => {
          if (rep.rows.length > 0) {
            orgno = 'ORGA' + rep.rows[0].sys_org_orgno// +'000001'
            // 获得最大编码值
            kk.k_load_exeid('public', 'M867EQ126', {}).then(rep2 => {
              if (rep2.rows.length > 0) {
                orgno = _this.joinOrgno(orgno, rep2.rows[0].num)
                // 赋值
                _this.beanForm.n_oside_code = orgno
              }
            })
          }
        })
      },
      // 根据查询出独立核算对象下机构的数量来确定自动生成的机构编码
      joinOrgno(orgno, num) {
        var totalLen = 6
        num = num + 1
        var len = num.toString().length
        var str = ''
        for (var i = 1; i <= totalLen - len; i++) {
          str = str + '0' + ''
        }
        return orgno + str + num + ''
      },
      // 机构种类改变
      org_type_change(val) {
        var _this = this
        // 加载一级分类
        kk.k_load_exeid('public', 'M867EQ122', { org_type: val }).then(rep => {
          _this['dict']['core_typeone'] = rep.rows
          // 默认选中第一个一级分类
          if (rep.rows.length > 0) {
            this.beanForm.core_typeone = rep.rows[0].value
            // 自动触发选择事件
            _this.core_typeone_change(rep.rows[0].value)
          }
        })
      },
      // 一级分类改变
      core_typeone_change(val) {
        var _this = this
        this.beanForm.core_typetwo = ''// 清空二级分类选择
        var p = val.substring(1, 2) // 取出第二个字符
        // 加载二级分类
        kk.k_load_exeid('public', 'M867EQ123', { core_typeone: p }).then(rep => {
          _this['dict']['core_typetwo'] = rep.rows
          // 默认选中第一个二级分类
          if (rep.rows.length > 0) {
            this.beanForm.core_typetwo = rep.rows[0].value
          }
        })
      },
      // 人行一级分类
      oside_bc_type_change(val) {
        var _this = this
        this.beanForm.oside_bc_subtype = ''// 清空人行二级分类
        // 加载人行二级分类
        kk.k_load_exeid('public', 'M867EQ127', { oside_bc_type: val }).then(rep => {
          _this['dict']['oside_bc_subtype'] = rep.rows
          _this.$nextTick(() => {
            // 重复新增，去掉校验提示
            _this.$refs['beanForm'].clearValidate() // 必须写在$nextTick里面
          })
          // 人行二级分类有数据
          if (rep.rows.length > 0) {
            // 添加校验规则
            _this.rules.oside_bc_subtype = [
              { required: true, message: '请选择人行二级分类', trigger: 'change' }
            ]
            _this.oside_bc_subtype_disabled = false
          } else {
            // 删除校验规则
            _this.rules.oside_bc_subtype = []
            _this.oside_bc_subtype_disabled = true
          }
        })
      },
      // 区域(省)改变
      province_change(val) {
        var _this = this
        this.beanForm.city = ''// 清空二级分类选择
        // 查询该省下面的市数据，只去前面2个字母
        var area_code_subStr = val.substr(0, 2)
        // 加载二级分类
        kk.k_load_exeid('public', 'M8654EQ002', { area_code_subStr: area_code_subStr }).then(rep => {
          _this['dict']['city'] = rep.rows
        })
      },
      // ======================提交重置========================
      // 提交
      submitForm(formName) {
        var _this = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.submitOk(formName)
          } else {
            console.log('error submit!!')
          }
        })
      },
      // 发送提交请求
      submitOk(formName) {
        kk.k_update_exeid('public', 'M861EU001', this.beanForm)
        // 关闭当前路由页面并且返回前一个页面
        this.$store.state.tagsView.visitedViews.splice(this.$store.state.tagsView.visitedViews.findIndex(item => item.path === this.$route.path), 1)
        this.$router.go(-1)
      },
      // 重置
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>
  .home{
    -moz-user-select: text; /*火狐*/
    -webkit-user-select: text; /*webkit浏览器*/
    -ms-user-select: text; /*IE10*/
    -khtml-user-select: text; /*早期浏览器*/
    user-select: text;
  }
</style>
